<script setup>
import { computed, defineAsyncComponent } from 'vue';

import { constants } from '#/constant';
import { formatDate, formatDateTime, getIndexById, getNameById } from '#/utils';

const props = defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
  checkList: {
    type: Array,
    default: () => [],
  },
});
const ImgPreview = defineAsyncComponent(
  () => import('#/component/imgPreview/index.vue'),
);
const finallyColumns = computed(() => {
  return props.columns.filter((item) => props.checkList.includes(item.label));
});
const getTypeItem = (row, item) => {
  const arr =
    (item.prop && item.prop.includes('|') && item.prop.split(item.type)) || [];
  return arr
    .map((i) => {
      return row[i] || '';
    })
    .join(' ');
};

const getCustom = (template, data) => {
  let str = template.template;
  for (let i = 0; i < template.data.length; i++) {
    let d = '';

    if (template.data[i].formatInfo && template.data[i].formatInfo.formatMap) {
      d =
        template.data[i].formatInfo.formatMap[data[template.data[i].name]] ||
        '--';
      if (template.data[i].formatInfo?.tagType === 'tag') {
        d = `<span class="el-tag el-tag--${template.data[i].formatInfo.tag.typeMap[data[template.data[i].name]]} el-tag--light"><span class="el-tag__content">${d}</span><!--v-if--></span>`;
        // d = '<span class="el-tag el-tag--' + template.data[i].formatInfo.tag.typeMap[data[template.data[i].name]] + ' el-tag--light"><span class="el-tag__content">' + d + '</span><!--v-if--></span>';
      }
    } else {
      d = fromatData(template.data[i], data[template.data[i].name]);
      d = d || (d === 0 ? d : '--');
    }
    str = str.replace(`{${i}}`, d);
  }
  return str;
};

const fromatData = (item, data) => {
  // 字典
  const source = item.formatInfo?.source;
  let index = -100;
  if (source) {
    index = getIndexById(data, constants[source], 'value');
    data = getNameById(data, constants[source], 'value', 'label');
  }

  // 数据格式化
  const fromat = item.formatInfo?.dataFormat;
  // console.log(item,data,'item,data')
  switch (fromat) {
    case 'date': {
      data = formatDate(data);
      break;
    }
    case 'datetime': {
      data = formatDateTime(data);
      break;
    }
    case 'fun': {
      data = item && data && item.fun(data);
      break;
    }
    case 'obj': {
      data = item && data && data[item.keys];
      break;
    }
  }
  // 显示
  const tag = item.formatInfo?.tag;
  const color = item.formatInfo?.color;
  if (tag && tag.length > 0) {
    let tagName = tag[index] ? tag[index] : 'info';
    tagName = index === -100 ? tag[0] : tagName;
    data = `<span class="el-tag el-tag--${tagName} el-tag--light"><span class="el-tag__content">${data}</span></span>`;
  } else if (color && color.length > 0) {
    const colorName = color[index] ? color[index] : color[0];
    data = `<span style="color:${colorName}">${data}</span>`;
  }
  return data;
};
</script>

<template>
  <el-table-column
    v-for="(item, index) in finallyColumns"
    :key="index"
    :fixed="item.fixed"
    :label="item.label"
    :prop="item.prop"
    :show-overflow-tooltip="
      item.type == 'image' ? false : item.showOverflowTooltip ? true : false
    "
    :sortable="item.sortable"
    :type="item.expand === true ? 'expand' : ''"
    :width="item.width ? item.width : 'auto'"
    align="left"
  >
    <template #default="{ row }">
      <div :class="item.expand === true ? 'expand-column' : ''">
        <!-- 格式化 -->
        <span v-if="item.type === 'format'">
          <el-tag
            v-if="
              item.formatInfo &&
              (item.formatInfo.tagType === 'tag' ||
                item.formatInfo.tagType === 'color')
            "
            :color="
              item.formatInfo.tagType === 'color'
                ? item.formatInfo.tag.typeMap[row[item.prop]]
                : ''
            "
            :type="
              item.formatInfo.tagType === 'tag'
                ? item.formatInfo.tag.typeMap[row[item.prop]]
                : 'color'
            "
          >
            {{ item.formatInfo.formatMap[row[item.prop]] || '--' }}
          </el-tag>
          <span v-else-if="item.formatInfo.formatMap">
            {{ item.formatInfo.formatMap[row[item.prop]] }}
          </span>
          <span v-else>{{ fromatData(item, row[item.prop]) || '--' }}</span>
        </span>
        <span
          v-else-if="item.type === 'custom'"
          v-html="getCustom(item.customInfo, row)"
        >
        </span>
        <span v-else-if="item.type === 'image'">
          <ImgPreview
            v-if="row[item.prop]"
            :src-list="[row[item.prop]]"
            :url="[row[item.prop]]"
          />
          <span v-else> -- </span>
        </span>
        <span v-else-if="item.type === 'number'">{{
          (row[item.prop] && Number(row[item.prop]).toFixed(4)) || '0'
        }}</span>
        <span v-else-if="item.type === 'obj'">{{
          (row[item.prop] && row[item.prop][item.keys]) ||
          (row[item.prop] && row[item.prop][item.keys] === 0 && '0') ||
          '--'
        }}</span>
        <span v-else-if="item.type === 'fun'">{{
          (row[item.prop] && item.fun(row[item.prop])) || '--'
        }}</span>
        <span v-else-if="item.type === '|'">{{ getTypeItem(row, item) }}</span>
        <span
          v-else-if="item.type === 'html'"
          v-html="
            (item.prop !== 'row' && item.fun(row[item.prop])) ||
            (item.prop === 'row' && item.fun(row))
          "
        ></span>
        <span
          v-else
          v-html="
            fromatData(item, row[item.prop]) ||
            (row[item.prop] === 0 ? row[item.prop] : '--')
          "
        ></span>
      </div>
    </template>
  </el-table-column>
</template>
